<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" >
	<head >
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit" />
		<meta name="renderer" content="ie-comp" />
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Expires" content="0">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<link th:href="@{/download/css/swiper.min.css}" rel="stylesheet"/>
		<link th:href="@{/download/css/index.css}" rel="stylesheet"/>
		<script th:src="@{/download/js/jquery-3.3.1.min.js}"></script>

		<title>[[${appName}]]</title>
		<style type="text/css">
			.loader {
				border: 4px solid #f3f3f3;
				border-radius: 50%;
				border-top: 4px solid #0477f9;
				width: 26px;
				height: 26px;
				float: left;
				margin-left: 4px;
				-webkit-animation: spin 2s linear infinite; /* Safari */
				animation: spin 2s linear infinite;
			}

			/* Safari */
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
	<div class="contain-page">
		<!-- info -->
		<div class="app-info">
			<div class="app-logo">
				<img th:src="@{${iconPath}}" />
			</div>
			<div class="app-info-rig">
				<strong>[[${appName}]]</strong>
				<div class="clr">
					<a class="arouse" href="#"><b>?</b>安装教程</a>
					<a id="downloading_cmp" class="btn btn-mini step4 " th:href="@{${plistPath}}">点击下载</a>
					<a class="btn btn-mini step3" style="float: left; display: none" id="downloading" href="#"><span>正在打包</span><em></em><div class="loader"></div>
					<a class="btn btn-mini step4" style="float: left;display: none;" id="installing" href="#"><span>安装中</span><em></em><div class="loader"></div></a>
					<a class="btn btn-mini step4" style="float: left;display: none;" id="installfinish" href="#"><span>在桌面打开</span><em></em></a>
				</div>
			</div>
		</div>
		<!-- 评价 -->
		<div class="app-show">
			<div class="app-score">
				<strong>4.9</strong><img th:src="@{/download/imgs/star.png}" alt="">
				<p><span class="down-count">9999</span>个评分</p>
			</div>
			<div class="app-age">
				<strong>4+</strong>
				<p>年龄</p>
			</div>
		</div>
		<div class="app-intro">
			<div class="app-intro-con" style="height: auto;">
				<p style="padding: 8px 8px 8px 8px; color: white; background-color: #e64141; border-radius: 5px;">
					1、如没有自动跳转安装描述文件，请手动点击设置 >> 通用 >> 描述文件 >> 点击安装<br />
					2、如遇无法下载或安装后无法打开，请尝试刷当前页面，点击完成或重新扫描二维码安装
				</p>
			</div>
		</div>
		<!-- 图片展示 -->
		<!-- intro -->
		<div class="app-intro">
			<h2 class="app-title">简介</h2>
			<div class="app-intro-con">
				<p>[[${appName}]]</p>
				<span>更多</span>
			</div>
		</div>
		<!-- 评分及评论 -->
		<div class="comment-box">
			<h2 class="app-title">
				评分及评论
			</h2>
			<div class="comment-con">
				<div class="comment-left">
					<strong>4.9</strong>
					<p>满分 5 分</p>
				</div>
				<div class="comment-right">
					<ul class="comment-star-list">
						<li>
							<div class="comment-star">
								<img th:src="@{/download/imgs/star.png}" alt="">
								<div></div>
							</div>
							<div class="comment-progress">
								<div></div>
							</div>
						</li>
						<li>
							<div class="comment-star">
								<img th:src="@{/download/imgs/star.png}" alt="">
								<div></div>
							</div>
							<div class="comment-progress">
								<div></div>
							</div>
						</li>
						<li>
							<div class="comment-star">
								<img th:src="@{/download/imgs/star.png}" alt="">
								<div></div>
							</div>
							<div class="comment-progress">
								<div></div>
							</div>
						</li>
						<li>
							<div class="comment-star">
								<img th:src="@{/download/imgs/star.png}" alt="">
								<div></div>
							</div>
							<div class="comment-progress">
								<div></div>
							</div>
						</li>
						<li>
							<div class="comment-star">
								<img th:src="@{/download/imgs/star.png}" alt="">
								<div></div>
							</div>
							<div class="comment-progress">
								<div></div>
							</div>
						</li>
					</ul>
					<p><span class="down-count">9999</span>个评分</p>
				</div>
			</div>
		</div>
		<!-- 版本号 -->
		<div class="app-intro">
			<h2 class="app-title">新功能</h2>
			<div class="app-intro-con">
				<p>版本 1.4</p>
			</div>
		</div>
		<!-- 信息 -->
		<div class="information-box">
			<h2 class="app-title">信息</h2>
			<ul class="information-list">
				<li>
					<span class="l">销售商</span>
					<div class="r"></div>
				</li>
				<li>
					<span class="l">大小</span>
					<div class="r">7M</div>
				</li>
				<li>
					<span class="l">语言</span>
					<div class="r">简体中文</div>
				</li>
				<li>
					<span class="l">年龄分级</span>
					<div class="r">限4岁以上</div>
				</li>
				<li>
					<span class="l">价格</span>
					<div class="r">免费</div>
				</li>
				<li>
					<span class="l blue-color">隐私政策</span>
					<div class="r"></div>
				</li>
			</ul>
		</div>
		<!-- 免责声明 -->
		<div class="disclaimer">
			免责声明：<br>
			本网站仅提供下载托管，App内容相关事项由开发者负责，与本网站无关。
		</div>
		<!-- 蒙版 -->
		<div class="mask">
			<img th:src="@{/download/imgs/go-safari.png}" alt="">
		</div>
		<!-- safari提示框 -->
		<div class="mask-box safari-tips">
			<div class="mask-bg"></div>
			<div class="mask-pop">
				<span class="mask-colsed"><img th:src="@{/download/imgs/colsed.png}" alt=""></span>
				<img class="copy-url-img" th:src="@{/download/imgs/safari-tip.png}" alt="">
				<div class="copy-url">
					<input id="foo" type="text">
					<button data-clipboard-target="#foo">复制</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 电脑展示 -->
	<div class="pc-box">
		<div class="pc-logo">
			<img th:src="@{/download/imgs/safari-tip.png}" src="${iconPath}" />
		</div>
		<P>[[${appName}]]</P>

		<img class="code" src="" alt="">
		<div class="info">请使用相机扫码下载</div>
	</div>
	<script type="text/javascript" th:src="@{/download/js/fingerprint2.min.js}"></script>
	<script type="text/javascript" th:src="@{/download/js/download.js}"></script>
	<script type="text/javascript" th:src="@{/download/js/swiper.min.js}"></script>
	<script type="text/javascript" th:src="@{/download/js/clipboard.min.js}"></script>
	<script>

		$(function () {
			$("#downloading_cmp").on("click", function () {
				$("#downloading_cmp").hide();
				$("#downloading").show();
				setTimeout(function(){
					$('#downloading').hide();
					$('#installing').show();
				}, 8000);
				setTimeout(function(){
					$('#installing').hide();
					$('#installfinish').show();
				}, 15000);
			})

		})



	</script>

	</body>
</html>